<template>
    <div style="padding:15px">
        <vxe-toolbar id="toolbarId" :setting="{storage: true}" export :refresh="{query: findList}">
            <template v-slot:buttons>
                <el-button @click="findList">查询</el-button>
                <el-button @click="funcAdd">新增</el-button>
            </template>
        </vxe-toolbar>
        <vxe-table
                ref="xTable"
                border
                show-footer
                resizable
                stripe
                highlight-current-row
                highlight-hover-row
                show-header-overflow show-overflow
                row-id="id"
                class="mytable-footer"
                height="700"
                :data="tableData"
                :loading="loading"
                remote-sort
                @sort-change="sortList"
        >

            <vxe-table-column>
                <vxe-table-column field="field" title="字段" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.field" placeholder="请输入字段" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="fieldName" title="字段展示名称" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.fieldName" placeholder="请输入字段展示名称" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="type" title="字段类型" :formatter="formatterType" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-select v-model="listQuery.type" placeholder="请选择" clearable>
                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="source" title="数据来源" :formatter="formatterSource" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-select v-model="listQuery.source" placeholder="请选择" clearable>
                        <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="sort" title="排序" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.sort" placeholder="请输入排序" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="remark" title="备注" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.remark" placeholder="请输入备注" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column title="操作" fixed="right" min-width="150">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="详情" placement="top">
                        <vxe-button type="text" @click="funcDetail(scope.row.code)">
                            <i class="el-icon-document" />
                        </vxe-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                        <vxe-button type="text" @click="funcEdit(scope.row.code)">
                            <i class="el-icon-edit" />
                        </vxe-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <vxe-button type="text" @click="funcDelete(scope.row.code)">
                            <i class="el-icon-delete" />
                        </vxe-button>
                    </el-tooltip>
                </template>
            </vxe-table-column>
        </vxe-table>
        <vxe-pager
                :loading="loading"
                :current-page.sync="listQuery.pageNum"
                :page-size.sync="listQuery.pageSize"
                :total="listQuery.total"
                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
                @page-change="handlePageChange"
        />

        <vxe-modal v-model="modelAddFlag" title="新增" width="800" height="800" resize>
            <compAdd ref="addRef" @fatherAddMethod="fatherAdd" @fatherCancelMethod="fatherCancel" />
        </vxe-modal>
        <vxe-modal v-model="modelEditFlag" title="编辑" width="800" height="800" resize>
            <compEdit ref="editRef" @fatherEditMethod="fatherEdit" @fatherCancelMethod="fatherCancel" />
        </vxe-modal>
        <vxe-modal v-model="modelDetailFlag" title="详情" width="800" height="800" resize>
            <compDetail ref="detailRef" />
        </vxe-modal>
    </div>
</template>
<script>
    import Vue from 'vue'
    import 'xe-utils'
    import VXETable from 'vxe-table'
    import 'vxe-table/lib/index.css'
    import XEUtils from 'xe-utils'
    import VXEUtils from 'vxe-utils'
    Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
    import compAdd from './components/diyReportFieldAdd.vue'
    import compEdit from './components/diyReportFieldEdit.vue'
    import compDetail from './components/diyReportFieldDetail.vue'
    import request from '@/utils/request'
    export default {
        name: 'diyReportFieldList',
        components: {
            compAdd,
            compEdit,
            compDetail
        },
        data() {
            return {
                message: '',
                loading: false,
                tableData: [],
                modelAddFlag: false,
                modelEditFlag: false,
                modelDetailFlag: false,
                copy: false,
                listQuery: {
                    code: '',
                    branchCode: '',
                    reportCode: '',
                    field: '',
                    fieldName: '',
                    type: '',
                    source: '',
                    sort: '',
                    calJson: '',
                    remark: '',
                    pageNum: 1,
                    pageSize: 10,
                    sortField: '',
                    sortType: '',
                    total: 0
                },
                // 字段类型
                typeOptions: [
                    { label: '文本', value: 'str'},
                    { label: '数字', value: 'int'},
                    { label: '字典值', value: 'select'},
                    { label: '日期', value: 'date'},
                    { label: '金额', value: 'dicimal'}
                ],
                // 数据来源
                sourceOptions: [
                    { label: '自定义', value: 'diy'},
                    { label: '计算得出', value: 'cal'}
                ]
            }
        },
        created() {
            this.listQuery.reportCode = this.$route.query.code
            this.findList()
        },
        methods: {
            findList() {
                this.loading = true
                request({
                    url: '/ntocc-tms-api/diyReportField',
                    method: 'get',
                    params: this.listQuery
                }).then(response => {
                    this.tableData = response.data.records
                    this.listQuery.total = response.data.total
                    this.loading = false
                })
            },
            // 翻译字段类型
            formatterType({ cellValue }) {
                const item = this.typeOptions.find(item => item.value === cellValue)
                return item ? item.label : ''
            },
            // 翻译数据来源
            formatterSource({ cellValue }) {
                const item = this.sourceOptions.find(item => item.value === cellValue)
                return item ? item.label : ''
            },
            // 排序
            sortList({ column, property, order }) {
                if (order) {
                    this.listQuery.sortField = property
                    this.listQuery.sortType = order
                } else {
                    this.listQuery.sortField = ''
                }
                this.findList()
            },
            // 添加方法
            funcAdd() {
                this.$refs.addRef.getInfo()
                this.modelAddFlag = true
            },
            // 修改方法
            funcEdit(code) {
                this.$refs.editRef.getInfo(code)
                this.modelEditFlag = true
            },
            // 详情方法
            funcDetail(code) {
                this.$refs.detailRef.getInfo(code)
                this.modelDetailFlag = true
            },
            // 删除方法
            funcDelete(row) {
                this.$confirm('确认删除吗？').then(_ => {
                    request({url: `/ntocc-tms-api/diyReportField`, method: 'delete', params: { codes: row }}).then(response => {
                        this.$message({ message: response.msg, type: 'success' })
                        this.findList()
                    })
                }).catch(_ => {})
            },
            // 增加组件的父方法
            fatherAdd() {
                this.modelAddFlag = false
                this.findList()
            },
            // 编辑组件的父方法
            fatherEdit() {
                this.modelEditFlag = false
                this.findList()
            },
            // 公共取消
            fatherCancel(modelFlag) {
                switch(modelFlag){
                    case 'add':
                        this.modelAddFlag = false
                        break;
                    case 'edit':
                        this.modelEditFlag = false
                        break;
                    case 'detail':
                        this.modelDetailFlag = false
                        break;
                    default:
                }
            },
            // 分页handle
            handlePageChange({ currentPage, pageSize }) {
                this.listQuery.pageNum = currentPage
                this.listQuery.pageSize = pageSize
                this.findList()
            }
        }
    }
</script>

<style>
  .vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 6px 0;
  }
  .vxe-toolbar{padding:0 0 10px 0}
</style>
